<template>
	<view>
		<view class="container">
			<camera mode="scanCode" class="camera" device-position="back" :flash="flash" @error="error">
				<cover-view class="camera-body">
					<cover-view style="width: 100%;height: 400rpx;background-color: rgba(0, 0, 0, .6);display: flex;flex-direction: column;justify-content: flex-end;">
						<cover-view style="text-align: center;margin-bottom: 100rpx;color: rgba(255, 255, 255, .8);font-size: 36rpx;">测试标题测试标题测试标题测试标题</cover-view>
					</cover-view>
					<cover-view class="camera-caiji">
						<cover-view style="width: 50rpx;height: 100%;background-color: rgba(0, 0, 0, .6);"></cover-view>
						<cover-view style="width: 50rpx;height: 100%;background-color: rgba(0, 0, 0, .6);"></cover-view>
					</cover-view>
					<cover-view style="width: 100%;height: 100%;background-color: rgba(0, 0, 0, .6);display: flex;justify-content: center;">
						<cover-view style="width: 220rpx;height: 80rpx;background-color: #00BC79; margin-top: 300rpx;text-align: center;color: rgba(255, 255, 255, .8);display: flex;justify-content: center;border-radius: 100rpx;line-height: 76rpx;font-size: 34rpx;" @tap="openFlash">{{ flash == 'off' ? '打开' : '关闭' }}闪光灯</cover-view>
					</cover-view>
				</cover-view>
			</camera>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flash: 'on'
			}
		},
		methods: {
			openFlash() {
				if (this.flash == 'off') {
					this.flash = 'on';
				} else {
					this.flash = 'off';
				}
			}
		}
	}
</script>

<style>
	.camera {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
	}
	.camera-caiji {
		width: 750rpx;
		height: 500rpx;
		display: flex;
		justify-content: space-between;
		/* background-color: rgba(0, 0, 0, .6); */
	}
	.camera-body {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0);
	}
</style>
